<template>
	<div class="release allbgc">
		<div class="release-top alltop">
			发布
		</div>

		<van-form @submit="onSubmit" ref="regFrom">
			<van-field v-model="title" name="title" label="标题" placeholder="标题" :rules="[{ required: true, message: '填写标题' }]" />
			<van-field :value="cate_name" name="cate_name" label="分类" placeholder="请选择分类" readonly @click="catePickershow=true" />
			<van-field v-model="content" name="content" label="内容" type="textarea" placeholder="内容" :rules="[{ required: true, message: '请填写内容' }]" />
			<van-uploader :after-read="afterRead" />

			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit" color="#07c160" style="width: 280px;height: 40px;font-size: 14px;margin: 0 auto;">提交</van-button>
			</div>
		</van-form>
		<van-popup v-model="catePickershow" position="bottom" :style="{ height: '40%' }">
			<van-picker title="请选择" show-toolbar :columns="cate" @confirm="onConfirm" @cancel="catePickershow=false" value-key="name" />
		</van-popup>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				title: '',
				content: '',
				cate_id: '',
				cate_name: '',
				imageSrc: [],
				catePickershow: false,
			}
		},
		computed: {
			...mapState(['cate'])
		},
		created() {
			this.$store.dispatch('getCate')
		},
		methods: {
			onConfirm(e) {
				console.log(e);
				this.catePickershow = false;
				this.cate_name = e.name;
				this.cate_id = e._id;
			},
			onSubmit(values) {
				console.log('submit', values);
			},
			afterRead(file) {
				console.log(file);
			},
		},

	};
</script>

<style lang="less">
	.release input,
	.release textarea {
		width: 100%;
		border: none;
		padding-left: 10px;
	}

	.release-top {
		text-align: center;
	}

	.van-field__label {
		width: 40px;
	}

	.photo {
		text-align: center;
	}

	.photo button {
		width: 280px;
		height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: @color;
		border: none;
		margin-top: 25px;
	}
</style>
